<template>
  <el-space direction="vertical" alignment="flex-start" :style="{ width: wid }">
    <el-skeleton
      style="width: 200px"
      :loading="loading"
      animated
      :throttle="1000"
    >
      <template #template>
        <slot name="defaultShow">
          <el-skeleton-item
            variant="image"
            style="width: 150px; height: 150px"
          />
          <div style="padding: 4px">
            <div
              style="
                display: flex;
                align-items: center;
                justify-items: space-between;
                margin-top: 5px;
                height: 5px;
              "
            >
              <el-skeleton-item
                variant="text"
                style="margin-right: 8px; width: 55%"
              />
              <el-skeleton-item variant="text" style="width: 15%" />
            </div>
          </div>
        </slot>
      </template>
      <template #default>
        <slot name="targetShow">
          <Card :item="item" wth="100%"></Card>
        </slot>
      </template>
    </el-skeleton>
  </el-space>
</template>

<script lang="ts" setup>
import { defineProps, computed } from 'vue'
import Card from '../../card-item/src/card.vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  wid: {
    type: String,
    default: '18%'
  }
})

const loading = computed(() => !props.item.name)
</script>

<style scoped></style>
